<template>
  <theme-config :costomData="costomData" v-if="costomData.chartType == 'themeForm'"></theme-config>
  <bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'bar'" :key="costomData.customId"></bar-config>
  <line-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'line'" :key="costomData.customId"></line-config>
  <scatter-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'scatter'" :key="costomData.customId"></scatter-config>
  <double-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'doublebar'" :key="costomData.customId"></double-bar-config>
  <paralle-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'parallebar'" :key="costomData.customId"></paralle-bar-config>
  <top-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'topbar'" :key="costomData.customId"></top-bar-config>
  <cylinder-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'cylinder'" :key="costomData.customId"></cylinder-config>
  <staggered-label-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'staggeredLabel'" :key="costomData.customId"></staggered-label-config>
  <doubley-axis-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'doubleyAxis'" :key="costomData.customId"></doubley-axis-config>
  <double-direction-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'doubleDirectionBar'" :key="costomData.customId"></double-direction-bar-config>
  <double-bar-time-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'doublebartime'" :key="costomData.customId"></double-bar-time-config>
  <single-column-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'singleColumn'" :key="costomData.customId"></single-column-config>
  <three-d-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'threeDBar'" :key="costomData.customId"></three-d-bar-config>
  <text-config :costomData="costomData" v-else-if="costomData.chartType == 'text'" :key="costomData.customId"></text-config>
  <date-config :costomData="costomData" v-else-if="costomData.chartType == 'date'"></date-config>
  <image-config :costomData="costomData" v-else-if="costomData.chartType == 'img'"></image-config>
  <q-rcode-config :costomData="costomData" v-else-if="costomData.chartType == 'qRcode'"></q-rcode-config>
  <video-config :costomData="costomData" v-else-if="costomData.chartType == 'video'"></video-config>
  <realtime-config :costomData="costomData" v-else-if="costomData.chartType == 'realtime'"></realtime-config>
  <hyper-link-config :costomData="costomData" v-else-if="costomData.chartType == 'hyperlink'"></hyper-link-config>
  <iframe-config :costomData="costomData" v-else-if="costomData.chartType == 'iframe'"></iframe-config>
  <rotation-config :costomData="costomData" v-else-if="costomData.chartType == 'rotation'" :key="costomData.customId"></rotation-config>
  <color-block-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'colorBlock'"></color-block-config>
  <word-cloud-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'wordcloud'"></word-cloud-config>
  <stacked-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'stackedBar'" :key="costomData.customId"></stacked-bar-config>
  <shadow-line-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'shadowLine'" :key="costomData.customId"></shadow-line-config>
  <table-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'taBle'" :key="costomData.customId"></table-config>
  <table-rotation-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'tablerotation'" :key="costomData.customId"></table-rotation-config>
  <table-top-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'tabletop'" :key="costomData.customId"></table-top-config>
  <handson-table-config :costomData="costomData" v-else-if="costomData.chartType == 'handsontable'"></handson-table-config>
  <input-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'input'"></input-config>
  <time-frame-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'timeframe'"></time-frame-config>
  <timeline-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'timeline'"></timeline-config>
  <cascade-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'cascade'"></cascade-config>
  <tab-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'tab'" :key="costomData.customId"></tab-config>
  <pie-line-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'pieline'" :key="costomData.customId"></pie-line-config>
  <bar-pie-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'barPie'" :key="costomData.customId"></bar-pie-config>
  <line-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'linebar'" :key="costomData.customId"></line-bar-config>
  <rate-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'rateBar'" :key="costomData.customId"></rate-bar-config>
  <map-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'mapbar'" :key="costomData.customId"></map-bar-config>
  <twinkle-border-config :costomData="costomData" v-else-if="costomData.chartType == 'twinkleborder'"></twinkle-border-config>
  <around-border-config :costomData="costomData" v-else-if="costomData.chartType == 'aroundborder'"></around-border-config>
  <ray-config :costomData="costomData" v-else-if="costomData.chartType == 'ray'"></ray-config>
  <diffuseray-config :costomData="costomData" v-else-if="costomData.chartType == 'diffuseray'"></diffuseray-config>
  <midi-keyboard-config :costomData="costomData" v-else-if="costomData.chartType == 'midikeyboard'"></midi-keyboard-config>
  <voiceprint-config :costomData="costomData" v-else-if="costomData.chartType == 'voiceprint'"></voiceprint-config>
  <rain-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'rain'" :key="costomData.customId"></rain-config>
  <sankey-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'sankey'" :key="costomData.customId"></sankey-config>
  <pie-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'pie'" :key="costomData.customId"></pie-config>
  <ring-pie-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'ringPie'" :key="costomData.customId"></ring-pie-config>
  <funnel-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'funnel'" :key="costomData.customId"></funnel-config>
  <radar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'radar'" :key="costomData.customId"></radar-config>
  <gauge-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'gauge'" :key="costomData.customId"></gauge-config>
  <keygauge-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'keygauge'" :key="costomData.customId"></keygauge-config>
  <progress-gauge-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'progauge'" :key="costomData.customId"></progress-gauge-config>
  <select-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'select'"></select-config>
  <map-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'map'" :key="costomData.customId"></map-config>
  <map-line-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'mapline'" :key="costomData.customId"></map-line-config>
  <three-d-map-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'threedMapBar'" :key="costomData.customId"></three-d-map-bar-config>
  <three-d-map-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'threedMap'" :key="costomData.customId"></three-d-map-config>
  <lamp-text-config :costomData="costomData" v-else-if="costomData.chartType == 'lamp'" :key="costomData.customId"></lamp-text-config>
  <backborder-config :costomData="costomData" v-else-if="costomData.chartType == 'backborder'"></backborder-config>
  <map-more-config :costomData="costomData" v-else-if="costomData.chartType == 'mapMore'" :key="costomData.customId"></map-more-config>
  <water-ball-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'waterball'" :key="costomData.customId"></water-ball-config>
  <water-ball-line-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'waterballline'" :key="costomData.customId"></water-ball-line-config>
  <circle-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'circle'" :key="costomData.customId"></circle-config>
  <pie-more-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'piemore'" :key="costomData.customId"></pie-more-config>
  <progress-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'progress'" :key="costomData.customId"></progress-config>
  <knowledge-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'knowledge'" :key="costomData.customId"></knowledge-config>
  <pops-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'pops'" :key="costomData.customId"></pops-config>
  <sunburst-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'sunburst'" :key="costomData.customId"></sunburst-config>
  <flop-config :costomData="costomData" v-else-if="costomData.chartType == 'flop'"></flop-config>
  <text-check-box-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'textCheckBox'"></text-check-box-config>
  <custom-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'customChart'" :key="costomData.customId"></custom-config>
  <custom-water-ball-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'customWaterBall'" :key="costomData.customId"></custom-water-ball-config>
  <scanning-config :costomData="costomData" v-else-if="costomData.chartType == 'scanning'"></scanning-config>
  <turntable-config :costomData="costomData" v-else-if="costomData.chartType == 'turntable'"></turntable-config>
  <boxline-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'boxline'" :key="costomData.customId"></boxline-config>
  <tian-di-map-config :costomData="costomData" v-else-if="costomData.chartType == 'tiandiMap'"></tian-di-map-config>
  <galaxy-config :costomData="costomData" v-else-if="costomData.chartType == 'galaxy'"></galaxy-config>
  <group-config :costomData="costomData" v-else-if="costomData.chartType == 'group'"></group-config>
  <card-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'card'"></card-config>
  <heatMap-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'heatMap'"></heatMap-config>
  <tree-layout-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'relationGraph'"></tree-layout-config>
  <pictorial-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'pictorialBar'" :key="costomData.customId"></pictorial-bar-config>
  <custom-threeD-bar-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'CustomThreeDBar'" :key="costomData.customId"></custom-threeD-bar-config>
  <interact-config :costomData="costomData" :drawingList="drawingList" v-else-if="costomData.chartType == 'interact'" :key="costomData.customId" />
</template> 

<script>

import VueEvent from '@/views/tool/datav/VueEvent'
import ThemeConfig from '@/views/tool/datav/components/config/ThemeConfig'
import BarConfig from '@/views/tool/datav/components/config/BarConfig'
import LineConfig from '@/views/tool/datav/components/config/LineConfig'
import ScatterConfig from '@/views/tool/datav/components/config/ScatterConfig'
import ParalleBarConfig from '@/views/tool/datav/components/config/ParalleBarConfig'
import CylinderConfig from '@/views/tool/datav/components/config/CylinderConfig'
import StaggeredLabelConfig from '@/views/tool/datav/components/config/StaggeredLabelConfig'
import DoubleBarConfig from '@/views/tool/datav/components/config/DoubleBarConfig'
import DoubleDirectionBarConfig from '@/views/tool/datav/components/config/DoubleDirectionBarConfig'
import TopBarConfig from '@/views/tool/datav/components/config/TopBarConfig'
import DoubleyAxisConfig from '@/views/tool/datav/components/config/DoubleyAxisConfig'
import DoubleBarTimeConfig from '@/views/tool/datav/components/config/DoubleBarTimeConfig'
import SingleColumnConfig from '@/views/tool/datav/components/config/SingleColumnConfig'
import ThreeDBarConfig from '@/views/tool/datav/components/config/ThreeDBarConfig'
import TextConfig from '@/views/tool/datav/components/config/TextConfig'
import DateConfig from '@/views/tool/datav/components/config/DateConfig'
import ImageConfig from '@/views/tool/datav/components/config/ImageConfig'
import QRcodeConfig from '@/views/tool/datav/components/config/QRcodeConfig'
import VideoConfig from '@/views/tool/datav/components/config/VideoConfig'
import RealtimeConfig from '@/views/tool/datav/components/config/RealtimeConfig'
import HyperLinkConfig from '@/views/tool/datav/components/config/HyperLinkConfig'
import IframeConfig from '@/views/tool/datav/components/config/IframeConfig'
import RotationConfig from '@/views/tool/datav/components/config/RotationConfig'
import ColorBlockConfig from '@/views/tool/datav/components/config/ColorBlockConfig'
import WordCloudConfig from '@/views/tool/datav/components/config/WordCloudConfig'
import TwinkleBorderConfig from '@/views/tool/datav/components/config/TwinkleBorderConfig'
import AroundBorderConfig from '@/views/tool/datav/components/config/AroundBorderConfig'
import RayConfig from '@/views/tool/datav/components/config/RayConfig'
import MidiKeyboardConfig from '@/views/tool/datav/components/config/MidiKeyboardConfig'
import VoiceprintConfig from '@/views/tool/datav/components/config/VoiceprintConfig'
import DiffuserayConfig from '@/views/tool/datav/components/config/DiffuserayConfig'
import StackedBarConfig from '@/views/tool/datav/components/config/StackedBarConfig'
import ShadowLineConfig from '@/views/tool/datav/components/config/ShadowLineConfig'
import TableConfig from '@/views/tool/datav/components/config/TableConfig'
import TableRotationConfig from '@/views/tool/datav/components/config/TableRotationConfig'
import TableTopConfig from '@/views/tool/datav/components/config/TableTopConfig'
import HandsonTableConfig from '@/views/tool/datav/components/config/HandsonTableConfig'
import InputConfig from '@/views/tool/datav/components/config/InputConfig'
import TimeFrameConfig from '@/views/tool/datav/components/config/TimeFrameConfig'
import TimelineConfig from '@/views/tool/datav/components/config/TimelineConfig'
import CascadeConfig from '@/views/tool/datav/components/config/CascadeConfig'
import TabConfig from '@/views/tool/datav/components/config/TabConfig'
import PieLineConfig from '@/views/tool/datav/components/config/PieLineConfig'
import BarPieConfig from '@/views/tool/datav/components/config/BarPieConfig'
import LineBarConfig from '@/views/tool/datav/components/config/LineBarConfig'
import MapBarConfig from '@/views/tool/datav/components/config/MapBarConfig'
import ThreeDMapConfig from '@/views/tool/datav/components/config/ThreeDMapConfig'
import ThreeDMapBarConfig from '@/views/tool/datav/components/config/ThreeDMapBarConfig'
import RainConfig from '@/views/tool/datav/components/config/RainConfig'
import PieConfig from '@/views/tool/datav/components/config/PieConfig'
import RingPieConfig from '@/views/tool/datav/components/config/RingPieConfig'
import FunnelConfig from '@/views/tool/datav/components/config/FunnelConfig' //漏斗图
import RadarConfig from '@/views/tool/datav/components/config/RadarConfig'  //雷达图
import GaugeConfig from '@/views/tool/datav/components/config/GaugeConfig'  //仪表盘
import KeygaugeConfig from '@/views/tool/datav/components/config/KeygaugeConfig'
import ProgressGaugeConfig from '@/views/tool/datav/components/config/ProgressGaugeConfig'
import SelectConfig from '@/views/tool/datav/components/config/SelectConfig'
import MapConfig from '@/views/tool/datav/components/config/MapConfig'
import MapLineConfig from '@/views/tool/datav/components/config/MapLineConfig'
import LampTextConfig from '@/views/tool/datav/components/config/LampTextConfig'  //跑马灯
import BackborderConfig from '@/views/tool/datav/components/config/BackborderConfig' //背景框
import MapMoreConfig from '@/views/tool/datav/components/config/MapMoreConfig'
import WaterBallConfig from '@/views/tool/datav/components/config/WaterBallConfig'
import WaterBallLineConfig from '@/views/tool/datav/components/config/WaterBallLineConfig'
import CircleConfig from '@/views/tool/datav/components/config/CircleConfig'
import PieMoreConfig from '@/views/tool/datav/components/config/PieMoreConfig'
import ProgressConfig from '@/views/tool/datav/components/config/ProgressConfig'
import KnowledgeConfig from '@/views/tool/datav/components/config/KnowledgeConfig'
import PopsConfig from '@/views/tool/datav/components/config/PopsConfig'
import SunburstConfig from '@/views/tool/datav/components/config/SunburstConfig'
import FlopConfig from '@/views/tool/datav/components/config/FlopConfig'
import TextCheckBoxConfig from '@/views/tool/datav/components/config/TextCheckBoxConfig'
import CustomConfig from '@/views/tool/datav/components/config/CustomConfig'
import CustomWaterBallConfig from '@/views/tool/datav/components/config/CustomWaterBallConfig'
import ScanningConfig from '@/views/tool/datav/components/config/ScanningConfig'
import TurntableConfig from '@/views/tool/datav/components/config/TurntableConfig'
import BoxlineConfig from '@/views/tool/datav/components/config/BoxlineConfig'
import TianDiMapConfig from '@/views/tool/datav/components/config/TianDiMapConfig'
import GalaxyConfig from '@/views/tool/datav/components/config/GalaxyConfig'
import GroupConfig from '@/views/tool/datav/components/config/GroupConfig'
import CardConfig from '@/views/tool/datav/components/config/CardConfig'
import PictorialBarConfig from '@/views/tool/datav/components/config/PictorialBarConfig' //象形柱图
import CustomThreeDBarConfig from '@/views/tool/datav/components/config/CustomThreeDBarConfig'
import RateBarConfig from '@/views/tool/datav/components/config/RateBarConfig'
import SankeyConfig from '@/views/tool/datav/components/config/SankeyConfig'
import TreeLayoutConfig from '@/views/tool/datav/components/config/TreeLayoutConfig'
import HeatMapConfig from '@/views/tool/datav/components/config/HeatMapConfig'
import InteractConfig from '@/views/tool/datav/components/config/InteractConfig'

const dateTimeFormat = {
  date: 'yyyy-MM-dd',
  week: 'yyyy 第 WW 周',
  month: 'yyyy-MM',
  year: 'yyyy',
  datetime: 'yyyy-MM-dd HH:mm:ss',
  daterange: 'yyyy-MM-dd',
  monthrange: 'yyyy-MM',
  datetimerange: 'yyyy-MM-dd HH:mm:ss'
}

export default {
  components: {   
    ThemeConfig,
    BarConfig,
    LineConfig,
    ScatterConfig,
    ParalleBarConfig,
    CylinderConfig,
    StackedBarConfig,
    StaggeredLabelConfig,
    DoubleBarConfig,
    TopBarConfig,
    DoubleyAxisConfig,
    DoubleDirectionBarConfig,
    DoubleBarTimeConfig,
    SingleColumnConfig,
    ThreeDBarConfig,
    TextConfig,
    DateConfig,
    ShadowLineConfig,
    RainConfig,
    ImageConfig,
    QRcodeConfig,
    VideoConfig,
    RealtimeConfig,
    HyperLinkConfig,
    IframeConfig,
    RotationConfig,
    ColorBlockConfig,
    WordCloudConfig,
    TwinkleBorderConfig,
    AroundBorderConfig,
    RayConfig,
    DiffuserayConfig,
    MidiKeyboardConfig,
    VoiceprintConfig,
    TableConfig,
    TableRotationConfig,
    TableTopConfig,
    HandsonTableConfig,
    InputConfig,
    TimeFrameConfig,
    TimelineConfig,
    CascadeConfig,
    TabConfig,
    PieLineConfig,
    BarPieConfig,
    LineBarConfig,
    MapBarConfig,
    MapLineConfig,
    ThreeDMapConfig,
    ThreeDMapBarConfig,
    PieConfig,
    RingPieConfig,
    FunnelConfig,
    RadarConfig,
    GaugeConfig,
    KeygaugeConfig,
    ProgressGaugeConfig,
    SelectConfig,
    MapConfig,
    LampTextConfig,
    BackborderConfig,
    MapMoreConfig,
    WaterBallConfig,
    WaterBallLineConfig,
    CircleConfig,
    PieMoreConfig,
    ProgressConfig,
    KnowledgeConfig,
    PopsConfig,
    SunburstConfig,
    FlopConfig,
    TextCheckBoxConfig,
    CustomConfig,
    CustomWaterBallConfig,
    ScanningConfig,
    TurntableConfig,
    BoxlineConfig,
    TianDiMapConfig,
    GalaxyConfig,
    GroupConfig,
    CardConfig,
    PictorialBarConfig,
    CustomThreeDBarConfig,
    RateBarConfig,
    SankeyConfig,
    TreeLayoutConfig,
    HeatMapConfig,
    InteractConfig
  },
  props: ["activeData","drawingList"],
  data() {
    return {
      
      costomData: this.activeData,
      
    }
  },
  //页面加载完执行
  mounted() {
    VueEvent.$on("to_activated_msg", data=>{
      this.costomData = data;
    })
  },
  computed: {
    
  },
  watch: {
    costomData: {
      deep: true,
      handler(newVal, oldValue) {
        //console.log("3=>", newVal, oldValue);
        if(newVal.customId != oldValue.customId) {
          this.$emit("activeChange", newVal);
        }
      }
    },
    activeData: {
      deep: true,
      handler(newVal) {
        this.costomData = newVal;
      }
    }
  },
  methods: {
    costomChange(value) {
      //console.log("2=>", value);
      this.costomData = value;
    }
  }
}
</script>

<style lang="scss" scoped>
.right-board {
  width: 350px;
  position: absolute;
  right: 0;
  top: 0;
  padding-top: 3px;
  .field-box {
    position: relative;
    height: calc(100vh - 42px);
    box-sizing: border-box;
    overflow: hidden;
  }
  .el-scrollbar {
    height: 100%;
  }
}
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }
  & .el-input + .el-input {
    margin-left: 4px;
  }
}
.select-item + .select-item {
  margin-top: 4px;
}
.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}
.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
}
.option-drag {
  cursor: move;
}
.time-range {
  .el-date-editor {
    width: 227px;
  }
  ::v-deep .el-icon-time {
    display: none;
  }
}
.document-link {
  position: absolute;
  display: block;
  width: 26px;
  height: 26px;
  top: 0;
  left: 0;
  cursor: pointer;
  background: #409eff;
  z-index: 1;
  border-radius: 0 0 6px 0;
  text-align: center;
  line-height: 26px;
  color: #fff;
  font-size: 18px;
}
.node-label{
  font-size: 14px;
}
.node-icon{
  color: #bebfc3;
}
</style>
